<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/animate.min.css">

</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 头部上 -->
        <div class="top">
            <div class="con">
                <div class="left">
                    <h5>1件包邮</h5>
                </div>
                <div class="right">
                    <ul>
                        <li><a href="./html/login.html">亲,请登录</a></li>
                        <li><a href="./html/register.html">免费注册</a></li>
                        <li><a href="">搜索</a></li>
                        <li><a href="./html/cart.html">购物车<span>0件</span></li>
                        <li><a href="">我的订单</a></li>
                        <li><a href="">专属导购</a></li>
                        <li><a href="">关注ONLY微信</a></li>
                        <li><a href="">手机购物</a></li>
                    </ul>
                </div>
        </div>
    </div>
    <!-- 头部下 -->
    <div class="tdown">
        <div class="con">
            <div class="left">
                <img src="./img/logo.png" alt="">
            </div>
            <div class="right">
                <ul>
                    <li><a href="./index.html">首页</a></li>
                    <li><a href="./html/shoppingCart.html">春季新品</a></li>
                    <li><a href="./html/shoppingCart.html">商场同款新降折扣</a></li>
                    <li><a href="./html/shoppingCart.html">连衣裙</a></li>
                    <li><a href="./html/shoppingCart.html">牛仔裤</a></li>
                    <li><a href="./html/shoppingCart.html">针织衫</a></li>
                    <li><a href="./html/shoppingCart.html">外套</a></li>
                    <li><a href="./html/shoppingCart.html">IP合作款</a></li>
                    <li><a href="./html/login.html">会员中心</a></li>
                </ul>
            </div>
        </div> 
    </div>
    </div>
<!-- 中间 -->
    <!--banner -->
    <div class="middle">
    <div class="banner">
        <div class="change">
            <img src="./img/banner_01.png" alt="">
        </div>
        <div class="sumer animate__animated animate__bounceInUp">
            <img src="./img/banner_02.png" alt="">
        </div>
    </div>
    <!-- 轮播 -->
    <div class="rbanner">
        <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./img/HOT_01.png" alt=""></div>
            <div class="swiper-slide"><img src="./img/HOT_02.png" alt=""></div>
            <div class="swiper-slide"><img src="./img/HOT_03.png" alt=""></div>
            <div class="swiper-slide"><img src="./img/HOT_04.png" alt=""></div>
            <div class="swiper-slide"><img src="./img/HOT_05.png" alt=""></div>
            <div class="swiper-slide"><img src="./img/HOT_06.png" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    </div>
    <!-- 热门品类 -->
    <div class="hot">
        <div class="left">
            <img src="./img/cate_icon.png" alt="">
        </div>
        <div class="right">
            <ul>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-01.jpg" alt=""></a><span>连衣裙</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-02.jpg" alt=""></a><span>牛仔裤</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-03.jpg" alt=""></a><span>T恤</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-04.jpg" alt=""></a><span>薄针织</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-05.jpg" alt=""></a><span>半身裙</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-06.jpg" alt=""></a><span>西服.外套</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-07.jpg" alt=""></a><span>衬衫.雪纺</span></li>
                <li><a href="./html/shoppingCart.html"><img src="./img/cate-08.jpg" alt=""></a><span>休闲裤</span></li>
            </ul>
        </div>
    </div>
</div>

<!-- 底部 -->
    <div class="footer">
        <!-- 底部上 -->
        <div class="emperor">
            <div class="left">
                <ul>
                    <li><img src="./img/footer1.png" alt=""></li>
                    <li>用户服务协议及隐私政策</li>
                    <li><a href="">点击查看</a></li>
                </ul>
            </div>
            <div class="fmiddle">
                <ul>
                    <li><img src="./img/weikefu.jpg" alt=""><span>专属时尚顾问</span></li>
                    <li><img src="./img/shoujigou.png" alt=""><span>小程序</span></li>
                    <li><img src="./img/ONLY.png" alt=""><span>官方微信</span></li>
                </ul>
            </div>
            <div class="right">
                <dl>
                    <dt><img src="./img/call.png" alt=""></dt>
                    <dd>售后服务热线</dd>
                    <dd>400-862-8888</dd>
                    <dd>服务时间: 900-21:00</dd>
                </dl>
            </div>
        </div>
        <!-- 底部下 -->
        <div class="lower">
           <div class="jack">
               <ul>
                   <li><a href=""><img src="./img/logo-footer.png" alt=""></a></li>
                   <li><a href=""><img src="./img/logo-footer (1).png" alt=""></a></li>
                   <li><a href=""><img src="./img/logo-footer (2).png" alt=""></a></li>
               </ul>
           </div>
           <div class="beset">
               <p>© 2013 Bestseller. All Rights Reserved</p>
               <a href="">津公网安备12011402000594号</a>
               <a href="">违法和不良信息举报电话：12377</a>
               <a href="">津ICP备12007886号 -3(营业执照)</a>
               <a href="">涉未成年人专用举报渠道</a>
           </div>
        </div>
    </div>
    <div class="kefu">
        <p>客服</p>
        <div class="bigimg"></div>
    </div>
<script src="./libs/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true,
        loop: true, // 循环模式选项
        autoplay:true,//等同于以下设置
        navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    });
    </script>
</body>
</html>